<template>
    <div>
        <tabbar :msg="'/solution?id=' + activeName"></tabbar>
        <div style="padding-top: 50px;">
            <div class="solution_bg bg1" v-if="activeName == 0">
                <div>先享后付</div>
                <div>让信用融入生活，让世界更加美好</div>
            </div>
            <div class="solution_bg bg2" v-if="activeName == 1">
                <div>电商行业解决方案</div>
                <div>hwgPay平台技术，对电商行业提供一站式解决方案，合规分账系统帮助电商平台丰富交易场景基础建设。</div>
            </div>
            <div class="solution_bg bg3" v-if="activeName == 2">
                <div>零售行业解决方案</div>
                <div>提供数字化解决方案，助力商户实现产业化变革</div>
            </div>
            <div>
                <!-- <van-tabs @change="changeTab" v-model="activeName" color="#006FBC" title-active-color="#006FBC"
                    title-inactive-color="#333">
                    <van-tab v-for="item, index in list" :title="item.name" :key="index">
                    </van-tab>
                </van-tabs> -->
                <!-- <div class="desc_li">
                    <div class="desc_img">
                        <img src="../../images/solution/icon.png" alt="">{{ list[activeName].title }}
                    </div>
                    <div class="desc_title">{{ list[activeName].desc }}</div>
                </div> -->
                <life v-if="activeName == 0"></life>
                <retail v-if="activeName == 1"></retail>
                <beauty v-if="activeName == 2"></beauty>
                <!-- <wisdom v-if="activeName == 3"></wisdom> -->
            </div>
        </div>
        <!-- 解决方案 -->
        <div class="pay_sel">
            <div>获取一对一支付解决方案</div>
            <div @click="$router.push('/business')">定制您的解决方案 <img src="../../images/home/icon_you_sel1.png" alt=""></div>
        </div>
        <!-- 底部 -->
        <footers></footers>
    </div>
</template>
<script>
import tabbar from "@/components/tabbar";
import footers from "@/components/footer";
import life from "./life";
import retail from "./retail";
import beauty from "./beauty"
import wisdom from "./wisdom"
export default {
    name: 'solution',
    components: {
        tabbar, footers, life, retail, beauty, wisdom
    },
    data() {
        return {
            activeName:0,
            list: [
                {
                    name: '生活服务',
                    id: 0,
                    title: '生活服务简介',
                    desc: '通过平台整合能力，助力挖掘流量洼地，整合平台内容、服务和支付能力，为用户提供更友好的体验，助力提升行业效率。'
                },
                {
                    name: '电商零售',
                    id: 1,
                    title: '电商零售简介',
                    desc: '为电商零售构建安全、高效、多元的支付体系，助力 B2B、B2C 模式解决交易难题，提升用户体验与企业运营效率。'
                },
                {
                    name: '医美教培',
                    id: 2,
                    title: '医美教培简介',
                    desc: '面向医美、教培等行业，提供聚合支付、智能分账、营销引流、灵活用工提供 “先体验，后付款” 信用消费模式，消费者可先享受服务，后续按期结算费用，降低消费决策门槛。'
                },
                {
                    name: '智慧免租',
                    id: 3,
                    title: '智慧免租简介',
                    desc: '基于支付与大数据，打造 “智能租金 + 信用免押 + 数据风控” 体系，线上数字化管理，提升商业运营效率。'
                },
            ]
        }
    },
    watch: {
        activeName(newVal) {
            this.$router.push({ path: '/solution', query: { id: newVal } })
        },

    },
    mounted(){
        console.log(this.$route.query.id);
        
        this.activeName = Number(this.$route.query.id)
    },
    methods: {
        changeTab(index) {
            // console.log(index);

        }
    }
}
</script>
<style scoped lang="scss">
.solution_bg {
    background: url('../../images/solution/bg1.png') no-repeat center;
    background-size: cover;
    height: 152px;
    padding-left: 36px;
    div:first-child {
        padding-top: 45px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
        // text-align: center;
    }

    div:last-child {
        // padding: 0 47px;
        // padding-right: ;
        width: 80%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        margin-top: 6px;
    }
}
.bg1{
    background: url('../../images/solution/bg1.png') no-repeat center;
    background-size: cover;
}
.bg2{
    background: url('../../images/solution/b1.png') no-repeat center;
    background-size: cover;
}
.bg3{
    background: url('../../images/solution/b2.png') no-repeat center;
    background-size: cover;
}
.desc_li {
    background: #F6FBFE;
    padding: 20px 16px 16px 16px;

    .desc_img {
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;

        img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
    }

    .desc_title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #333333;
    }
}

.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    // margin: 24px 0 20px 0;
    padding: 24px 0 20px 0;
    text-align: center;
}

// .pay_scene_box {
//     width: 100%;
//     /* 设置宽度 */
//     overflow: hidden;
//     /* 隐藏溢出内容 */
//     padding-left: 12px;
//     box-sizing: border-box;

//     .pay_scene {
//         display: flex;
//         justify-content: flex-start;
//         /* 使内容从左到右排列 */
//         align-items: center;
//         flex-wrap: nowrap;
//         /* 不换行 */
//         overflow-x: auto;
//         /* 仅在水平方向允许滚动 */
//         scroll-snap-type: x mandatory;
//         /* 可选：实现平滑滚动效果 */
//         scrollbar-width: none;
//         /* Firefox 隐藏滚动条 */
//         -ms-overflow-style: none;
//         /* IE 和 Edge 隐藏滚动条 */
//         padding: 0 12px;
//         /* 添加内边距以避免内容紧贴边缘 */

//         /* 隐藏滚动条 */
//         &::-webkit-scrollbar {
//             display: none;
//             /* WebKit 浏览器隐藏滚动条 */
//         }

//         div {
//             flex: 0 0 146px;
//             /* 确保每个子项的宽度固定 */
//             height: 224px;
//             background: red;
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             scroll-snap-align: start;
//             /* 可选：使每个项在滚动时对齐 */
//             margin-right: 10px;
//             /* 添加间距 */
//             font-family: PingFangSC, PingFang SC;
//             font-weight: 400;
//             font-size: 14px;
//             color: #FFFFFF;
//         }

//         .bg1 {
//             background: url('../../images/solution/b1.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg2 {
//             background: url('../../images/solution/b2.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg3 {
//             background: url('../../images/solution/b3.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg4 {
//             background: url('../../images/solution/b4.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg5 {
//             background: url('../../images/solution/b5.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg6 {
//             background: url('../../images/solution/b6.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg7 {
//             background: url('../../images/solution/b7.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg8 {
//             background: url('../../images/solution/b8.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg9 {
//             background: url('../../images/solution/b9.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg10 {
//             background: url('../../images/solution/b10.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg11 {
//             background: url('../../images/solution/b11.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg12 {
//             background: url('../../images/solution/b12.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg13 {
//             background: url('../../images/solution/b13.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg14 {
//             background: url('../../images/solution/b14.png') no-repeat center;
//             background-size: cover;
//         }

//         .bg15 {
//             background: url('../../images/solution/b15.png') no-repeat center;
//             background-size: cover;
//         }
//     }
// }

// 解决方案
.pay_sel {
    background: url('../../images/home/bg7.png') no-repeat center;
    background-size: cover;
    padding: 16px 0 25px 0px;
    text-align: center;
    div:first-child {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #0051C4;
    }

    div:last-child {
        // display: flex;
        // align-items: center;
        display: inline-block;
        background: #0051C4;
        border-radius: 35px;
        padding: 4px 10px;
        margin-top: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #fff;
        margin-left: 2px;

        img {
            width: 12px;
            vertical-align: middle;
            margin-top: -3px;
        }
    }
}
</style>